<template>
    <nav>
        <div style="max-width:1240px;margin:auto;height:100%;width:100%">
            <strong>{{ activity.activityTitle }}</strong>
        </div>
    </nav>
    <div style="margin-top: 60px"></div>
    <main style="max-width:1240px;margin:auto;height:100%;width:100%">
        <h1 style="text-align:center">{{ activity.activityTitle }}</h1>
        <div style="display:flex;justify-content: center;">
            <small style="display:block">发布于
                {{ dateFormat(new Date(activity.activityDate), 'yyyy-MM-dd hh:mm:ss') }}
            </small>&nbsp;&nbsp;
            <small style="display:block"> {{ activity.activityExtent }} 可参与</small>&nbsp;&nbsp;
            <small v-if="activity.sponsor != null" style="display:block"> {{ activity.sponsor.nickname }} 发布</small>
        </div>
        <el-divider />
        <div>
            <strong>活动简介</strong>
            <p>{{ activity.activityDesc }}</p>
            <strong>活动地点</strong>
            <p>{{ activity.activityPosition }}</p>
            <strong>活动要求</strong>
            <p>{{ activity.activityRequirement }}</p>
            <el-timeline v-if="isAllow">
                <el-timeline-item :hollow="timeLineConfig[0].focused"
                    :size="timeLineConfig[0].focused ? 'large' : 'normal'"
                    :timestamp="activity.activityArrangeFormatted" :type="timeLineConfig[0].type" placement="top">
                    <el-card>
                        <!-- <h4>报名要求</h4>-->
                        <p>{{ sign== null ? '你还没有报名' : '你已报名'}}</p>
                        <br>
                        <el-input v-model="signForm.signText" :disabled="!timeLineConfig[0].focused" :rows="2"
                            type="textarea" placeholder="报名" />
                        <br><br>
                        <el-button :disabled="!timeLineConfig[0].focused" @click="engageActivity"
                            type="primary">提交申请</el-button>
                        <br><br>
                        <el-collapse>
                            <el-collapse-item title="已报名列表" name="1">
                                <div class="user_list">
                                    <div v-for="sign in activity.participantList" class="user_tag" :key="sign.signId">
                                        <img :src="sign.user.picture != null ? sign.user.picture : require('@/assets/img/avatar.png')"
                                            alt="">
                                        <span>{{ sign.user.nickname }}</span>
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item :size="timeLineConfig[1].focused ? 'large' : 'normal'" :type="timeLineConfig[1].type"
                    :hollow="timeLineConfig[1].focused" :timestamp="activity.activityStageFormatted" placement="top">
                    <el-card>
                        <!-- <h4>内容要求</h4>-->
                        <p>你还未签到，请输入签到码签到</p>
                        <br>
                        <el-input v-model="signForm.signIsSign" :disabled="!timeLineConfig[1].focused"
                            placeholder="签到码" />
                        <br><br>
                        <el-button @click="signActivity" :disabled="!timeLineConfig[1].focused"
                            type="primary">签到</el-button>
                        <br><br>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item :size="timeLineConfig[2].focused ? 'large' : 'normal'" :type="timeLineConfig[2].type"
                    :hollow="timeLineConfig[2].focused" :timestamp="activity.activityDoneFormatted" placement="top">
                    <el-card>
                        <h4>活动报告</h4>
                        <p>如果活动要求结束后提交报告，请在这里提交</p>
                        <br>
                        <el-input :model-value="signForm.signReport" :disabled="!timeLineConfig[2].focused" :rows="2"
                            type="textarea" placeholder="填写活动报告" />
                        <br><br>
                        <el-button @click="reportActivity" :disabled="!timeLineConfig[2].focused" type="primary">提交报告</el-button>
                        <br><br>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
            <p v-if="!isAllow" style="padding:20px;font-size:20px;color:red;text-align:center">你不符合此活动的参与要求</p>
        </div>
    </main>

</template>
<script>
import { dateFormat } from '../assets/js/dateformat.js'
export default {
    components: {},
    data() {
        return {
            dateFormat: dateFormat,
            isAllow: true,
            activity: {
                activityArrange: 1673594656000,
                activityDate: 1673508310000,
                activityDesc: "必须要来",
                activityDone: 1673681083000,
                activityExtent: "全国",
                activityId: 1,
                activityRequirement: "所有学生",
                activitySponsorId: "1",
                activityStage: 1673702690000,
                activityTitle: "开学第一课",
                activityVerification: "123456"
            },
            sign: null,
            signForm: {
                signText: '', signReport: ''
            },
            timeLineConfig: [{ focused: false, type: 'info' },
            { focused: false, type: 'info' }, { focused: false, type: 'info' }]
        }
    },
    created() {
        this.$store.dispatch("updateUser").then(() => {
            this.user = this.$store.state.user;
        });
        this.getActivityDetail()
    },
    methods: {
        getActivityDetail() {
            let activityId = this.getQueryVariable('id')
            this.$fetchutil.get('/browse/activity/get_activity?activityId=' + activityId, data => {
                this.activity = data.data
            })
            this.$request.get('/activity/is_allow?activityId=' + activityId).then(data => {
                this.isAllow = data.data
            }).catch(err => {
                this.isAllow = false
                this.$ElMessage({
                    message: err,
                    type: "error",
                })
            })
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        },
        reportActivity() {
            this.$request.post('/activity/activity_report', {
                reportContent: this.signForm.signReport
                , activityId: this.activity.activityId
            }).then(data => {
                this.$ElMessage({
                    message: data.msg,
                    type: data.data ? "success" : "error",
                })
                this.getActivityDetail()
            })
        },
        engageActivity() {
            if (this.sign != null) return
            this.$request.get('/activity/activity_appeal?activityId=' + this.getQueryVariable('id') + '&appealText=' + this.signForm.signText
            ).then(data => {
                this.$ElMessage({
                    message: data.data != null ? '参与成功' : '参与失败',
                    type: data.data != null ? "success" : "error",
                })
                if (data.data != null) {
                    this.sign = data.data
                }
                this.getActivityDetail()
            })
        },
        signActivity() {
            this.$request.get('/activity/activity_sign?activityId=' + this.activity.activityId
                + '&code=' + this.signForm.signIsSign).then(data => {
                    this.$ElMessage({
                        message: data.msg,
                        type: data.data ? "success" : "error",
                    })
                    this.sign.signIsSign = data.data
                })
        }
    },
    watch: {
        activity(activity) {
            activity.activityArrangeFormatted = dateFormat(new Date(activity.activityArrange)) + '（未开始）'
            activity.activityStageFormatted = dateFormat(new Date(activity.activityStage)) + '（未开始）'
            activity.activityDoneFormatted = dateFormat(new Date(activity.activityDone)) + '（未开始）'
            let datetime = new Date().getTime()
            if (datetime <= activity.activityArrange) return

            if (datetime >= activity.activityArrange && datetime <= activity.activityStage) {
                this.timeLineConfig[0] = { focused: true, type: 'primary' }
                activity.activityArrangeFormatted = dateFormat(new Date(activity.activityArrange)) + '（报名中）'
            } else if (datetime >= activity.activityStage && datetime <= activity.activityDone) {
                this.timeLineConfig[0] = { focused: false, type: 'success' }
                this.timeLineConfig[1] = { focused: true, type: 'primary' }
                activity.activityStageFormatted = dateFormat(new Date(activity.activityStage)) + '（进行中）'
                activity.activityArrangeFormatted = dateFormat(new Date(activity.activityArrange)) + '（已过期）'
            } else {
                activity.activityDoneFormatted = dateFormat(new Date(activity.activityDone)) + '（活动完成）'
                activity.activityStageFormatted = dateFormat(new Date(activity.activityStage)) + '（已结束）'
                this.timeLineConfig[0] = { focused: false, type: 'success' }
                this.timeLineConfig[1] = { focused: false, type: 'success' }
                this.timeLineConfig[2] = { focused: true, type: 'success' }
            }
        },
        sign() {
            if (this.sign != null) this.timeLineConfig[0] = { focused: false, type: 'primary' }
        },
        '$store.state.user.userId'() {
            this.$request.get('/activity/is_sign?activityId=' + this.getQueryVariable('id')).then(data => {
                this.sign = data.data
            })
        }
    }
}
</script>
<style scoped>
.user_list {
    display: flex;
    flex-wrap: wrap;
}

.user_tag {
    height: 35px;
    align-items: center;
    display: flex;
    margin: 10px;
}

.user_tag img {
    height: 100%;
    width: 35px;
    margin-right: 10px;
    border-radius: 50%;
}

nav {
    height: 60px;
    position: fixed;
    width: 100%;
    padding: 0 10px;
    z-index: 10;
    box-sizing: border-box;
    top: 0;
    border-bottom: 1px solid #cdd0d6;
    display: flex;
    backdrop-filter: saturate(180%) blur(6px);
    background: rgba(255, 255, 255, 0.9);
}

nav strong {
    padding: 0 10px;
    box-sizing: border-box;
    color: var(--el-text-color-regular);
    cursor: pointer;
    margin: auto;
    line-height: 60px;
    font-weight: normal;
}
</style>